<template>
	<view class="content">
		<view class="u-wall">
			<image class="bg" src="../../static/user-back.png"></image>
		</view>
		<view class="cur-card u-head">
			<view class="headpic round">
				<image class="pic round" :src="!user.guid?'/static/default_head.png':baseUrl+user.headPic"></image>
			</view>
			<view class="name">{{user.nickName}}</view>
			<view class="phone">{{user.mobile}}</view>
		</view>
		<view class="cur-card u-order">
			<view class="title"><text class="text">全部订单</text><text @click="gourl('/pages/user/order?id=-1')" class="icon-r cuIcon-right"></text></view>
			<view class="grid col-4 u-footer">
				<view class="padding" @click="gourl('/pages/user/order?id=1')">
					<text class="cuIcon-timefill icon text-yellow"></text>
					<view>已提交</view>
				</view>
				<view class="padding" @click="gourl('/pages/user/order?id=2')">
					<text class="cuIcon-likefill icon text-pink"></text>
					<view>服务中</view>
				</view>
				<view class="padding" @click="gourl('/pages/user/order?id=3')">
					<text class="cuIcon-roundcheckfill icon text-green"></text>
					<view>已完成</view>
				</view>
				<view class="padding" @click="gourl('/pages/user/order?id=4')">
					<text class="cuIcon-sponsorfill icon text-red"></text>
					<view>已退款</view>
				</view>
			</view>
		</view>
		<view class="cur-card u-nav">
			<uni-list>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" @click="gourl('/pages/user/setting')" title="个人信息" />
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" @click="gourl('/pages/user/modifypwd')" title="修改密码" />
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" @click="gourl('/pages/user/question')" title="常见问题" />
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" @click="gourl('/pages/user/about')" title="关于我们" />
			</uni-list>
		</view>
		<view class="footer" v-if="user.guid">
			<button type="warn" class="btn-exit" @click="loginExit()"><text class="cuIcon-exit icon"></text> 退出登录</button>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
	    mapState,
		mapMutations  
	} from 'vuex';  
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				baseUrl: '',
				extraIcon1: {
					color: '#ff7462',
					size: '22',
					type: 'contact'
				},
				extraIcon2: {
					color: '#ff7462',
					size: '22',
					type: 'compose'
				},
				extraIcon3: {
					color: '#ff7462',
					size: '22',
					type: 'help'
				},
				extraIcon4: {
					color: '#ff7462',
					size: '22',
					type: 'info'
				},
			};
		},
		computed: {
			...mapState(['hasLogin','user'])
		},
		async onLoad(options) {
			console.log(this.user);
			if(!this.user.guid){
				this.user.nickName='未登录';
			}
			this.baseUrl = this.$url;
		},
		onPullDownRefresh() {
			this.param.page = 1;
			//this.loadOrder();
		},
		methods: {
			...mapMutations(['logout']),
			gourl(u) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/account/login'
					})
				}else{
					uni.navigateTo({
						url: u
					})
				}
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '13511084034',
					success: () => {
						console.log("成功拨打电话")
					}
				})
			},
			goorder(it) {
				uni.navigateTo({
					url: '/pages/user/order?data='+escape(JSON.stringify(it))
				})
			},
			loginExit(){
				var that=this;
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		that.logout();
				    		setTimeout(()=>{
				    			uni.switchTab({
				    				url: '/pages/index/index'
				    			});
								// uni.reLaunch({
								// 	url: '/pages/index/index'
								// });
				    		}, 200)
				    	}
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background: #ffffff;
		height: 100%;
	}
	.uni-list-item__container{
		padding: 18rpx 30rpx !important;
	}
	.cur-card{
		margin:0px 15px;
		padding: 5px;
		background-color: #ffffff;
		box-shadow: 0 1px 3px #999;
		min-height: 100px;
		border-radius: 5px;
		position: relative;
		top:-65px;
		.title{
			padding:10px 15px;
			position: relative;
			font-size: 14px;
			font-weight: 600;
			color: #5e6d82;
		}
		.title:before{
			content: '';
			position: absolute;
			left:15px;
			right:15px;
			bottom: 0px;
			height: 1px;
			background-color: #e6e7e8;
		}
		.icon-r{
			position: absolute;
			right: 15px;
			top: 6px;
			font-size: 20px;
		}
	}
	.u-head{
		z-index: 100;
		.name {
			padding-top: 35px;
			font-size: 18px;
			text-align: center;
		}
		
		.phone {
			font-size: 16px;
			text-align: center;
		}
		.headpic {
			width: 80px;
			height: 80px;
			position: absolute;
			top: -40px;
			left:50%;
			margin-left: -40px;
			padding: 2px;
			border: 1px solid #ffffff;		
			.pic {
				width: 74px;
				height: 74px;
			}
		}
	}
	.u-wall {
		height: 180px;
		padding-top: 80px;
		margin-bottom: 10px;

		.bg {
			width: 100%;
			height: 180px;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
		}

	}
	.u-footer{
		.padding{
			text-align: center;
		}
		.icon{
			font-size: 22px;
		}
	}
	.u-order,.u-nav{
		margin-top: 20px;
	}
	.footer{
		padding:0px 15px;
		top:-40px;
		position: relative;
		.btn-exit{
			font-size: 14px;
			border-radius: 30px;
		}
	}
</style>
